<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title>FUN-GOBANG</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 请求路径
        var httpurl = "http://127.0.0.1:7777/login";
        var httpurl1 = "http://127.0.0.1:7777/register";
        // 数据请求
        function myClick() {
            var usernamestr = document.getElementById("username").value;
            var passwordstr = document.getElementById("password").value;
            $.ajax({
                url: httpurl,//请求的url地址
                type: 'post',//设置请求的http方式，method也可以
                dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
                data: {//向服务器端发送的数据
                    username: usernamestr,
                    password: passwordstr,
                },
                success: function (data) {//请求成功之后执行的回调函数
                    console.log(data.code);
                    if(data.code!==200){
                        alert("用户名或密码错误")
                    }else{
                        window.location.href = "/game";
                    }

                },
                error: function(error){
                    console.log(error)
                }
            });
        }
        function register(){
            var usernamestr = document.getElementById("username").value;
            var passwordstr = document.getElementById("password").value;
            $.ajax({
                url: httpurl1,//请求的url地址
                type: 'post',//设置请求的http方式，method也可以
                dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
                data: {//向服务器端发送的数据
                    username: usernamestr,
                    password: passwordstr,
                },
                success: function (data) {//请求成功之后执行的回调函数
                    console.log(data.code);
                    if(data.code!==200){
                        alert("注册失败")
                    }else{
                        alert("注册成功")
                    }

                },
                error: function(error){
                    console.log(error)
                }
            });
        }
    </script>

    <style>
    *{
      margin:0;
      padding:0;
      text-decoration: none;
      font-family: montserrat;
    }
    body{
      /* 设置段落的最小高度： */
      min-height: 100vh;
      /* linear-gradient:创造渐变效果 */
      background-image: linear-gradient(120deg,#d9a7c7,#fffcdc);
    }

    .login-form{
      width:360px;
      background-color: #f1f1f1;
      height: 380px;
      /* padding:上内边距和下内边距是 80px,右内边距和左内边距是 40px*/
      padding: 80px 40px;
      /* border-radius:形状处理 */
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

    .login-form h1{
      text-align: center;
      margin-bottom: 60px ;
    }

    .txtb{
      border-bottom: 2px solid #adadad;
      position:relative;
      margin: 30px 0;
    }

    .txtb input{
      font-size: 15px;
      color:#333;
      border: none;
      width: 100%;
      outline: none;
      background: none;
      padding: 0 5px;
      height: 40px;

    }

    /* .txtb span::before:对应span之前的元素
      在这里表示username和password
    */
    .txtb span::before{
      content: attr(data-placeholder);
      position: absolute;
      top: 50%;
      left: 5px;
      color:#ADADAD;
      transform: translateY(-50%);
      z-index: -1;
      transition: .5s;

    }


    .txtb span::after{
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      background:linear-gradient(120deg,#3498db,#8e44ad);
      transition: .5s;

    }

    /* 对span之前的元素设置focus效果
      设置字样上移
    */
    .focus + span::before{
      top: -5px;
    }

    /* 对span之前的元素设置focus效果
      设置横线变色
    */
    .focus + span::after{
      width:100%;
    }


    .logbtn{
      width: 100%;
      height: 50px;
      border: none;
      background: linear-gradient(120deg,#bfe6ba,#c9d6ff,#9d50bb);
      background-size: 200%;
      color: #fff;
      margin: 10px 0;
      font-size: 15px;
      /* cursor:pointer：设置鼠标样式 */
      cursor:pointer;
      transition: .5s;
    }

    /* 设置login按钮背景颜色向右移动
      达到渐变效果
    */
    .logbtn:hover{
      background-position:right ;
    }

    .bottom-text{
      margin-top:7px;
      text-align: justify;
      line-height: 17px;
      font-size: 13px;
    }

    .bottom-title{
      margin-top:50px;
      font-size: 15px;

      text-align: center;
    }
    </style>
</head>
<body>


<div class="login-form">
    <h1>WELCOME TO FUN_GOBANG</h1>
    <div class="txtb">
        <input autocomplete="off" type="text" id="username"/>
        <span data-placeholder="Username"></span>
    </div>
    <div class="txtb">
        <input type="password" id="password"/>
        <span data-placeholder="Password"></span>
    </div>
    <input type="button" name="chkbtn" onclick="myClick()" class="logbtn" value="Login" />
    <input type="button" name="chkbtn" onclick="register()" class="logbtn" value="Register" />
</div>
</body>
<script type="text/javascript">
        $(".txtb input").on("focus", function () {
            $(this).addClass("focus");
        });
        $(".txtb input").on("blur", function () {
            if ($(this).val() == "")
                $(this).removeClass("focus");
        });
    </script>
</html>

